import {LoadFunction, TableColumn} from "@/components/ATable/types";
import ElTableDialog from "@/components/ATableSelect/ElTableDialog.vue";
import ElTableSelector from "@/components/ATableSelect/ElTableSelector.vue";

export type ElTableDialogInstance=InstanceType<typeof ElTableDialog>;
export type ElTableSelectorInstance=InstanceType<typeof ElTableSelector>;

export const useElTableDialog=(
  load: LoadFunction,
  columns:TableColumn[],
  height?: number|string,
  query?:any,
  autoLoad?:boolean,
  selectType?:'checkbox' | 'radio',
  tableSlot?:Record<string, unknown>
)=>{
  const vRef=ref<ElTableDialogInstance>();
  const r=()=>h(ElTableDialog,{
    columns,
    height,
    query,
    autoLoad,
    loadFunction:load,
    useSelect:true,
    tableSlot,
    ref:vRef,
    selectType,
  })
  return {
    DOM:r,
    ref:vRef,
  }
}

export interface CreateTableSelect{
  loadFunction: LoadFunction,
  columns:TableColumn[],
  selectType?:'checkbox' | 'radio',
  height?: number,
  query?:any,
  tableSlot?:Record<string, unknown>,
  formart?:(data:any|any[])=>string,
}
export const useElTableSelector=(c:CreateTableSelect)=>{
  const vRef=ref<ElTableSelectorInstance>();
  const r=()=>h(
    ElTableSelector,
    {
      ref:vRef,
      ...c
    }
  )
  return {
    DOM:r,
    ref:vRef,
  }
}
